Namespace("sketch.ui.iphone");

(function(fwk, ui) {
    ui.iphone.SlidingElement = klass(fwk.UIElement, {
        _constructor: function(){
            this.properties.createProperty("value", "Value", 50)
                .editorTemplate("#editor-dropdown")
                .possibleValues({'0':0, '10':10, '20':20, '30':40, '40':40, '50':50, '60':60, '70':70, '80':80, '90':90, '100':100});
        },

        value: function(value){
            return this.properties.value(value);
        },

        drawSelf: function(context){
            var l = this.left(),
                t = this.top(),
                w = this.width(),
                h = this.height();

            var value = this.value();
            var handleCenter = ~~(w / 100 * value);
            var cornerRadius = 5;
            var handleRadius = 10;

            if (handleCenter === 0){
                handleCenter += handleRadius / 2;
            } else if (handleCenter === w){
                handleCenter -= handleRadius / 2;
            }

            context.save();
            context.fillStyle = fwk.Resources["slider_below"].toBrush(context, l, t, l, t + h);
            context.strokeStyle = "#4872BC";
            context.sideRoundedRectPath(l, t, handleCenter, h, cornerRadius, 0);
            context.fill();
            context.stroke();
            context.restore();

            context.save();
            context.fillStyle = fwk.Resources["slider_over"].toBrush(context, l, t, l, t + h);
            context.strokeStyle = "#CECECE";
            context.sideRoundedRectPath(l + handleCenter, t, w - handleCenter, h, 0, cornerRadius);
            context.fill();
            context.stroke();
            context.restore();

            context.save();
            context.fillStyle = fwk.Resources["slider_handle"].toBrush(context, l + handleCenter, t, l + handleCenter, t + h);
            context.strokeStyle = "#B7B7B7";
            context.circle(l + handleCenter, t + h/2, handleRadius);
            context.fill();
            context.stroke();
            context.restore();
        }
    });

    ui.iphone.Slider = klass(ui.common.StackPanel, {
        __type__: "ui.iphone.Slider",
        _constructor: function(){
            this.properties.createProperty("fromImage", "Source image", "/img/icons/brightness-down.png")
                .editorTemplate("#editor-imagepicker", "toolbar");
            this.properties.createProperty("toImage", "Target image", "/img/icons/brightness-up.png")
                .editorTemplate("#editor-imagepicker", "toolbar");
            this.properties.createProperty("value", "Current value", 50)
                .editorTemplate("#editor-dropdown")
                .possibleValues({'0':0, '10':10, '20':20, '30':40, '40':40, '50':50, '60':60, '70':70, '80':80, '90':90, '100':100});

            var fromImage = new fwk.ImageElement();
            fromImage.canSelect(false);
            fromImage.src(this.fromImage());
            this.properties.fromImage.bind(fromImage.properties.src.bindingPoint);


            var toImage = new fwk.ImageElement();
            toImage.canSelect(false);
            toImage.src(this.toImage());
            this.properties.toImage.bind(toImage.properties.src.bindingPoint);


            var slidingElement = new ui.iphone.SlidingElement();
            this.properties.value.bind(slidingElement.properties.value.bindingPoint);
            slidingElement.init({
                width:220,
                height:8,
                verticalAlignment:"center",
                canSelect:false,
                margin:new fwk.Box(10, 0, 10, 0),
                value:this.value()
            });

            this.orientation("horizontal");
            this.width(300);
            this.height(30);
            this.add(fromImage);
            this.add(slidingElement);
            this.add(toImage);
        },

        fromImage: function(value){
            return this.properties.fromImage(value);
        },
        toImage: function(value){
            return this.properties.toImage(value);
        },
        value: function(value){
            return this.properties.value(value);
        },
        canAccept: function(element){
            return false;
        },
        resizeDimensions:function(){
            return fwk.ResizeDimension.Horizontal;
        },
        clone: function(){
            return this.shallowCopy();
        }
    });
})(sketch.framework, sketch.ui);